<template>
    <div class="station">
        <station-header></station-header>
        <cesium-containercc :newArr5 = "newArr5"></cesium-containercc>
        <div class="stationLeftContent">
            <stationLeft-contentOne :weatherList="weatherList" :StationEPAdata="StationEPAdata"></stationLeft-contentOne>
            <stationLeft-contentTwo :QXZS="QXZS"></stationLeft-contentTwo>
            <stationLeft-contentThree :AllCityAqi="AllCityAqi" :StationEPAdata="StationEPAdata"
                :AllCityAqiDay="AllCityAqiDay" :StationEPAdataDay="StationEPAdataDay"
            ></stationLeft-contentThree>   
        </div>
        <right-tool></right-tool>
        <common-bottom></common-bottom>
        <city-centerContent   
            :QXZs7day="QXZs7day" 
            :QXZs24h="QXZs24h"
        >
        </city-centerContent>
        <common-legend></common-legend>
    </div>
</template>
<script>
import CesiumContainercc from '../cesium/CesiumContainercc'
import StationHeader from './components/StationHeader'
import RightTool from '../commons/RightTool'
import CommonLegend from '../commons/CommonLegend'
import StationLeftContentOne from './components/StationLeftContentOne'
import StationLeftContentTwo from './components/StationLeftContentTwo'
import StationLeftContentThree from './components/StationLeftContentThree'
import CityCenterContent    from '../cityW/components/CityCenterContent'
import CommonBottom from '../commons/CommonBottom'
import axios from 'axios'
export default {
    name: 'Station',
    components: {
        CesiumContainercc,
        StationHeader,
        RightTool,
        StationLeftContentOne,
        StationLeftContentTwo,
        StationLeftContentThree,
        CommonBottom,
        CommonLegend,
        CityCenterContent
    },
    data(){
        return{
            timer:null,
            weatherList: null,
            city_code: '',
            StationEPAdata:{},
            StationEPAdataDay:{},
            QXZS:{},
            AllCityAqi:{},
            AllCityAqiDay:{},
            QXZs7day:[],
            QXZs24h:[],
            newArr5:[],
            dingwei:'dw'
        }
    },
    watch: {
        city_code: function(){
            this.getWeather()
        }
    },
     beforeDestroy(){
        if(this.timer){
          clearInterval(this.timer)
        }
    },
    beforeMount(){
        this.$store.commit("changeForq",1)
    },
    mounted(){
        this.$store.commit("changeForq",1)
        this.$comjs.addError1(this.$store.state.objPopup4);
        // this.$comjs.addQ();
        this.$comjs.onCenter(119.906064,29.573401,961893.0);
        this.getCityCode();
        this.getWeather();
        this.getStationData();
        var date = new Date();//现在时刻
        var dateIntegralPoint = new Date();//用户登录时刻的下一个整点，也可以设置成某一个固定时刻
        dateIntegralPoint.setHours(date.getHours()+1);//小时数增加1
        dateIntegralPoint.setMinutes(10);
        dateIntegralPoint.setSeconds(0);
        console.log(dateIntegralPoint);
        console.log(dateIntegralPoint-date);
        console.log((dateIntegralPoint-date)/60000);
        setTimeout(()=>{this.andUpdata()},dateIntegralPoint-date);//用户登录后的下一个整点执行。
        
    },
    methods:{
        changeMarker(){
            $('div[id*="qixiangCityMarker"]').hide();
            $('div[id*="fuyangCityMarker"]').show();

            $('div[id*="qixiangProvinceMarker"]').hide();
            $('div[id*="fuyangProvinceMarker"]').show();
        },
        getCityCode(){
            axios.get('/_city.json').then(
                (res) =>{
                    var nameCode = res.data
                    for(var i=0;i<nameCode.length;i++){
                        if(nameCode[i].city_name == this.$store.state.headerCity){
                            this.city_code = nameCode[i].city_code
                        }
                    }
                }
            )
        },
        getWeather(){
            axios.get('/api'+ '101210101').then(
                this.getWeatherInfo
            )
        },
        getWeatherInfo(res){
            this.weatherList = res.data;
        },
        getStationData(){
            if(this.$comjs.isOnline){
                axios.get('/apis/api/QX/GetQXStationInfo?qxIIiii=' + this.$store.state.qxll + '&fylzName=' + this.$store.state.headerStation).then(
                    this.getStationDataInfo
                )
            }else{
                axios.get(this.$comjs.qhzsStation).then(
                    this.getStationDataInfo
                )
            }
        },
        getStationDataInfo(res){ 
            if(res.data.QXZS){
                this.QXZS=res.data.QXZS;
                this.newArr5.push(res.data.QXZS);
                if(this.dingwei=='dw'){
                    this.$comjs.onCenterR(res.data.QXZS.Lon,res.data.QXZS.Lat,2000.0) 
                }
            }
            if(res.data.StationEPAdata){
                this.StationEPAdata=res.data.StationEPAdata;
                this.$store.commit('changeStationX',res.data.StationEPAdata.Lon)
                this.$store.commit('changeStationY',res.data.StationEPAdata.Lat)
            }
            if(res.data.AllCityAqi){
                this.AllCityAqi=res.data.AllCityAqi;
            }
            if(res.data.StationEPAdataDay){
                this.StationEPAdataDay=res.data.StationEPAdataDay;
            }
            if(res.data.AllCityAqiDay){
                this.AllCityAqiDay=res.data.AllCityAqiDay;
            }
            if(res.data.QXZs24h){
                this.QXZs24h=res.data.QXZs24h; 
            }
            if(res.data.QXZs7day){
                this.QXZs7day=res.data.QXZs7day;   
            }
            if(this.StationEPAdata.Country){
                localStorage.setItem('headerCounty',this.StationEPAdata.Country);
            } 
            // this.getStationCountData=res.data.StationTypeCounts;  
            // this.QXZS=res.data.QXZS;
            // this.AllCityAqi=res.data.AllCityAqi[0];   
            // this.StationQXDJCounts=res.data.StationQXDJCounts; 
            // this.AllCityAqis24h=res.data.AllCityAqis24h; 
            // this.AllCityAqis7Day=res.data.AllCityAqis7Day;                  
        },
        andUpdata(){
            this.dingwei='bdw'
            this.getStationData()//在整点执行的函数，在每个整点都调用该函数
            this.timer = setInterval(()=>{this.getStationData()},60*60*1000);//一个小时执行一次，那么下一个整点，下下一个整点都会执行
        }
    }
}
</script>
<style>
    .stationLeftContent{
        position: absolute;
        left: 0;
        color:white;
        top: 6.57vh;
        z-index: 2;
        width: 4.02rem;
        /* height: calc(100% - 1.32rem); 12.2vh*/
        height: 87.7vh;
        /* overflow: hidden; */
        background: rgba(7,23,42,0.49);
    }
    .stationLeftContent a{
        color: white;
        text-decoration :none;
    }
</style>


